<template>
	<div class="fixed" v-show = 'position'>
	 <ul class="box">
				 <li>
				   <a href="index.html" v-bind:class='home' v-on:click='footCheck'>
					   <p v-if='home_contains'><img src="images/home-fill.png" /></p>
						 <p v-else><img src="images/home.png" /></p>
					   <p><span>首页</span></p>
					</a>
				 </li>
				 <li>
				   <a href="about.html" v-bind:class='check' v-on:click='footCheck'>
					   <p v-if='add_contents'><img src="images/add-fill.png" /></p>
					   <p v-else><img src="images/add.png" /></p>
					   <p><span>发布任务</span></p>
					 </a>
				 </li>
				 <li>
				   <a href="user.html" v-bind:class='check' v-on:click='footCheck'>
					  <p v-if='user_contents'><img src="images/user-fill.png" /></p>
						<p v-else><img src="images/user.png" /></p>
				    <p><span>用户</span></p>
						</a>
				 </li>
			 </ul>
	 </div>
</template>

<script>
import Bus from '../about/bus.js';
export default {
	data () {
		return {
			showAndHidden: true,
			home: '',
			add: '',
			user: '',
			position: true,
		}
	},
	props: ['add_contents','home_contains','user_contains'],
	created() {
        Bus.$on('getTarget', target => {
            this.position = target
        });
      },
	  methods: {
	    getLocation: function () {
         const s = document.createElement('script');
         s.type = 'text/javascript';
         s.src = 'http://api.map.baidu.com/api?ak=uXPwxYUexC96m3YGSSpNSzp599WCRSCO';
         document.body.appendChild(s);
         var that = this;
		 var map = new BMap.Map("currentCity");
	      function myFun(result){
		    var cityName = result.name.slice(0,2);
		    map.setCenter(cityName);
			//that.currentCity = cityName
	       }
	     var myCity = new BMap.LocalCity();
	     myCity.get(myFun);
      },
			footCheck: function () {
			var that = this
			  if(that.add_contents){
				  that.add = 'check'
				}else if(that.home_contains) {
				  that.home = 'check'
				}else if(that.user_contains) {
				  that.user = 'check'
				}
				that.getLocation()
			},
	  }
	}
</script>

<style scoped>
  .absolute{
	width:100%;
	position:absolute;
	bottom:0;
	}
	.fixed{
	width:100%;
	position:fixed;
	bottom:0;
	}
	.check{color:#11cd6e;}
	ul{list-style-type:none;margin:0;padding:0;}
	a{text-decoration:none;color:#93AC72}
	ul li{float:left;width:33.3%;text-align:center;padding:5px 0;background-color:#fff;}
  img{width:25px;height:25px;}
	p{margin:0;padding:0;font-size:12px;}
</style>
